<script setup>
	import { ref } from "vue";

	let emits = defineEmits(["submit"]);
	let props = defineProps({
		formOptions: {
			type: Object,
			default: {},
		}
	});

	let formRef = ref();

	function submitHandler() {
		emits("submit");
	}
</script>

<template>
	<div class="search-bar">
		<div class="search-bar-condition">
			<a-form layout="inline" v-bind="props.formOptions" ref="formRef">
				<slot name="condition" />
			</a-form>
		</div>
		<div class="search-bar-control">
			<slot name="control" :submit="submitHandler">
				<a-button type="primary" @click="submitHandler">搜索</a-button>
			</slot>
		</div>
	</div>
</template>

<style scoped lang="less">
	.search-bar {
		display: flex;
		width: 100%;
		height: fit-content;
		padding: 16px 0;
		.search-bar-condition {
			display: flex;
			justify-content: flex-start;
			font-size: 14px;
		}
		.search-bar-control {
			flex-grow: 1;
			display: flex;
			align-items: flex-start;
			width: fit-content;
		}
	}
</style>
